<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付页面</title>
    <link rel="stylesheet" href="/rzwl/pay/static/index.css">
    <link rel="stylesheet" href="/rzwl/components/tabbar/index.css">
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
    <script src="/rzwl/static/js/axios.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
    <div id="pay_app">
        <h1>支付页面</h1>
        <p>请选择支付方式或查看订单详情。</p>

        <div v-if="orderInfo">
            <h2>订单信息</h2>
            <p>订单ID: [[ orderInfo.order_id ]]</p>
            <p>商品名称: [[ orderInfo.training_class_name ]]</p>
            <p>价格: [[ orderInfo.price ]] 元</p>
            <button @click="initiatePayment" style="margin-top: 20px; padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;">立即支付</button>
        </div>
        <div v-else>
            <p>正在加载订单信息...</p>
        </div>

        <div v-if="userInfo">
        </div>
        <div v-else>
            <p>未检测到用户信息，请点击登录按钮进行微信授权。</p>
            <button @click="redirectToWechatAuth">点击登录</button>
        </div>
        <tabbar-component currentPage="pay"></tabbar-component>

        <!-- 支付成功弹窗 -->
        <div v-if="showPaymentSuccessModal" class="modal-overlay">
            <div class="modal-content">
                <p>您已支付 [[ orderInfo.price ]] 元购买 [[ orderInfo.training_class_name ]]。</p>
                <!-- <p>实际支付功能待集成。</p> -->
                <button @click="hideSuccessModal">确定</button>
            </div>
        </div>
    </div>

    <script>
        // 从后端Jinja2模板获取APP_ID
        window.WECHAT_APP_ID = "{{ APP_ID }}";
    </script>
    <script src="/rzwl/static/vue@2.6.14/dist/vue.min.js"></script>
    <script src="/rzwl/components/tabbar/index.js"></script>
    <script src="/rzwl/pay/static/index.js"></script>
</body>
</html>
